import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { routesConfig } from '@/renderer/routes';
import { CapsuleTabs } from 'antd-mobile';

const NavBar = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [activeKey, setActiveKey] = useState(location.pathname);

  const handleJump = (key: string) => {
    navigate(key);
  };

  useEffect(() => {
    setActiveKey(location.pathname);
  }, [location.pathname]);

  return (
    <nav className="flex justify-between px-4 py-2 bg-gray-800 text-white">
      <CapsuleTabs defaultActiveKey={activeKey} onChange={handleJump}>
        {routesConfig.map((item) => (
          <CapsuleTabs.Tab title={item.name} key={item.path}>
            {item.name}
          </CapsuleTabs.Tab>
        ))}
      </CapsuleTabs>
    </nav>
  );
};

export default NavBar;
